<template>
  <div class="main" ref="main">
    <el-backtop :visibility-height="400" :bottom="70">
      <el-tooltip effect="dark" content="回到顶部" placement="left">
        <i class="el-icon-caret-top"></i>
      </el-tooltip>
    </el-backtop>
    <Header :header-class="headerClass"/>
    <div class="top" :style="cssObj.topStyle">
      <div class="info">
        <div class="logo" :style="cssObj.logoStyle"></div>
        <div class="text">
          <h2 v-text="website.profile1"></h2>
          <h2 v-text="website.profile2"></h2>
        </div>
      </div>
    </div>
    <div class="list">
      <ArticleList :article-list="articleList" :no-scroll="noScroll"/>
      <div class="user-info" :style="userInfoStyle">
        <div class="avatar">
          <div class="avatar-img">
            <img :src="baseImageUrl+website.qrCode" alt="">
          </div>
        </div>
        <div class="nickname">
          <h3>{{website.nickname}}</h3>
        </div>
        <div class="total">
          <a class="article" href="#">
            <div>文章</div>
            <div>{{ total.articleCount }}</div>
          </a>
          <a class="category" href="/category">
            <div>分类</div>
            <div>{{ total.categoryCount }}</div>
          </a>
        </div>
        <div class="share">
          <a href="javascript:;"></a>
          <a href="javascript:;"></a>
          <a href="javascript:;"></a>
          <a href="javascript:;"></a>
          <a href="javascript:;"></a>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Footer from '@/components/Footer'
import Header from '@/components/Header'
import ArticleList from '@/components/ArticleList'
export default {
  name: 'Index',
  components: { Footer, Header, ArticleList },
  data () {
    return {
      website: {},
      bannerList: [
        {
          bannerUrl: 'a61b4ed8-2f8e-4687-ad97-e15f19aaefaa.jpg'
        }, {
          bannerUrl: '2f76ad5a-c011-4e31-bf63-0ed299598b24.jpg'
        }, {
          bannerUrl: 'c5ea7348-ba63-4847-b274-3f8dc1a591af.jpg'
        }
      ],
      bannerIndex: 0,
      baseImageUrl: process.env.VUE_APP_BASE_API + '/img/',
      interVal: '',
      headerClass: 'absolute-header',
      scrollTop: 0,
      clientHeight: 0,
      page: 1,
      articleList: [],
      userInfoStyle: {
        position: 'relative',
        left: 0,
        top: 0
      },
      total: {},
      noScroll: false
    }
  },
  computed: {
    cssObj () {
      return {
        topStyle: {
          background: `url(${this.baseImageUrl + this.bannerList[this.bannerIndex].bannerUrl}) no-repeat center/cover`
        },
        logoStyle: {
          background: `url(${this.baseImageUrl + this.website.logo}) no-repeat center/cover`
        }
      }
    }
  },
  methods: {
    setTopImage () {
      this.bannerIndex = parseInt((Math.random() * (this.bannerList.length)) + '')
    },
    /* 滚动条滚动事件处理方法 */
    handlerScroll (e) {
      /* 获取滚动条滚动的高度 */
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      /* 判断高度值来控制头部信息样式 */
      if (this.scrollTop > this.clientHeight / 2) {
        this.headerClass = 'fixed-header'
      } else {
        this.headerClass = 'absolute-header'
      }
      /* 获取header组件的高度 */
      const headerHeight = document.querySelector('.header').clientHeight
      /* 控制userinfo的样式 */
      if (this.scrollTop >= this.clientHeight - headerHeight) {
        this.userInfoStyle.top = (this.scrollTop - this.clientHeight + headerHeight) + 'px'
      } else {
        this.userInfoStyle.top = 0
      }
      /* 判断滚动加载 */
      if (this.$refs.main.scrollHeight - this.scrollTop === this.clientHeight) {
        if (this.noScroll) {
          e.preventDefault()
        } else {
          this.getArticleList()
        }
      }
    },
    getWebsite () {
      this.$http.get('api/website').then(data => {
        this.website = data.data
      })
    },
    getBannerList () {
      this.$http.get('api/banner').then(data => {
        this.bannerList = data.data
      })
    },
    getArticleList () {
      this.$http.get(`api/article/hot/${this.page}`).then(data => {
        if (data.data.current <= data.data.pages) {
          this.articleList.push(...data.data.records)
          this.page++
        } else {
          this.noScroll = true
        }
      })
    },
    getTotal () {
      this.$http.get('api/total').then(data => {
        this.total = { ...data.data }
      })
    }
  },
  created () {
    this.$nextTick(() => {
      this.setTopImage()
      /* 获取可视区域高度 */
      this.clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      this.getWebsite()
      this.getBannerList()
      this.getArticleList()
      this.getTotal()
    })
  },
  mounted () {
    this.interVal = setInterval(() => {
      this.setTopImage()
    }, 1000 * 60 * 5)
    window.addEventListener('scroll', this.handlerScroll, true)
  },
  destroyed () {
    clearInterval(this.interVal)
    window.removeEventListener('scroll', this.handlerScroll)
  }
}
</script>

<style scoped lang="scss">
.main{
  .top{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    .info{
      display: flex;
      .logo{
        height: 100px;
        width: 100px;
        border-radius: 50%;
      }
      .text{
        color: white;
        text-align: center;
        height: 100px;
        margin-left: 20px;
        h2{
          margin: 10px auto 30px;
        }
      }
    }
  }
  .list{
    width: 1080px;/*主流的宽度：760px。980px。1080px*/
    margin: 0 auto;
    display: flex;
    .user-info{
      width: 280px;
      height: 400px;
      margin: 10px;
      background-color: rgba(90, 181, 74, 0.08);
      box-shadow: 15px 15px 10px rgba(0,0,0,.5);
      .avatar{
        height: 200px;
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        .avatar-img{
          height: 150px;
          width: 150px;
          img{
            height: 100%;
            width: 100%;
            border-radius: 50%;
          }
        }
      }
      .nickname{
        text-align: center;
      }
      .total{
        display: flex;
        a{
          display: flex;
          color: black;
          text-decoration: none;
          width: 50%;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          cursor: pointer;
          div{
            margin: 5px;
          }
        }
      }
      .share{
        height: 50px;
        width: 220px;
        margin: 15px auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        a{
          display: block;
          width: 25px;
          height: 25px;
        }
        a:nth-child(1){
          background: url("../assets/share/qq1.png") no-repeat center/cover;
        }
        a:nth-child(2){
          background: url("../assets/share/wechat1.png") no-repeat center/cover;
        }
        a:nth-child(3){
          background: url("../assets/share/weibo1.png") no-repeat center/cover;
        }
        a:nth-child(4){
          background: url("../assets/share/zfb1.png") no-repeat center/cover;
        }
        a:nth-child(5){
          background: url("../assets/share/github1.png") no-repeat center/cover;
        }

        a:nth-child(1):hover{
          background: url("../assets/share/qq2.png") no-repeat center/cover;
        }
        a:nth-child(2):hover{
          background: url("../assets/share/wechat2.png") no-repeat center/cover;
        }
        a:nth-child(3):hover{
          background: url("../assets/share/weibo2.png") no-repeat center/cover;
        }
        a:nth-child(4):hover{
          background: url("../assets/share/zfb2.png") no-repeat center/cover;
        }
        a:nth-child(5):hover{
          background: url("../assets/share/github2.png") no-repeat center/cover;
        }
      }
    }
  }
}

</style>
